﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OShiYuanReportListHighcharts.aspx.cs" Inherits="IHISCETeim.Web.MachineSys.MacModel.OShiYuanReportListHighcharts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        html, body, div, span, applet, object, iframe,
         h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td { padding:0; margin:0; font-size:12px; line-height:100%; font-family:Arial, sans-serif;}
        table{}
        .table{ border:1px solid #000; border-collapse:collapse;width:100%; border-style:double; border-width:2px; }
        .table th{ text-align:center; line-height:25px;border:1px solid #000;}
        .table td{ text-align:center; line-height:16px;border:1px solid #000; padding-left:3px;}
        h1{ clear:both; line-height:25px; height:25px; font-size:22px; font-weight:bold;}
        h2{ clear:both; line-height:22px; height:22px; font-size:16px; font-weight:normal;}
    </style>
    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Highcharts/js/highcharts.js"></script>
    <script type="text/javascript" src="../Highcharts/js/themes/grid.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container" style="width:750px;">
        <div id="container_1" style=" margin:5px;">2012及2011年市怨月度对比走势图</div>
        <div id="container_1_data" style=" margin:5px;">
           <%-- 2012及2011年市怨月度对比走势图--%>
            <asp:GridView ID="GridView1" runat="server" CssClass="table" AutoGenerateColumns="True">
            </asp:GridView>
        </div>

        <div id="container_2" style=" margin:15px 5px 5px 5px;">2012年9月份市怨前十大分类统计图</div>
        <div id="container_2_data" style=" margin:5px;">
       
            <asp:GridView ID="GridView2" runat="server" CssClass="table" AutoGenerateColumns="True">
            </asp:GridView>
        </div>

        <div id="container_3" style="margin:15px 5px 5px 5px;">2012及2011年厂内品质异常月度走势图</div>
        <div id="container_3_data" style=" margin:5px;">
           
            <asp:GridView ID="GridView3" runat="server" CssClass="table" AutoGenerateColumns="True">
            </asp:GridView>
        </div>

        <div id="container_4" style="margin:15px 5px 5px 5px;">2012年9月份厂异前十大供应商分类统计图</div>
        <div id="container_4_data" style=" margin:5px;">
        
        <asp:GridView ID="GridView4" runat="server" CssClass="table" AutoGenerateColumns="True">
            </asp:GridView>
        </div>
    </div>
    </form>
    <script>
        //报表1
       
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container_1',
                        zoomType: 'xy',
                        borderWidth: 0,
                        backgroundColor:"#FFFFFF"
                    },
                    title: {
                        text: '<%=Year %>及<%=PreYear %>年市怨月度对比走势图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: [{
                        categories: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
                    }],
                    yAxis: [{ // 市怨件数
                        labels: {
                            formatter: function() {
                                return this.value +' 件';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: '市怨件数',
                            style: {
                                color: '#89A54E'
                            }
                        }
    
                    }, { // 市怨百份比
                        gridLineWidth: 0,
                        title: {
                            text: '市怨百分比',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' %';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true    
                    }
                    ],
                    tooltip: {
                        formatter: function() {
                            <%=GetTooltipUnit() %>

                            return "<b>"+ this.series.name+"</b><br/>" +this.x +': '+ this.y +' '+ unit;
                        }
                    },
                    series: [
                    <%=GetReport1Series() %>

                    ]
                });
            });
    
      
    </script>

    <script>
        //报表2
       
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container_2',
                        zoomType: 'xy',
                        borderWidth: 0,
                        backgroundColor:"#FFFFFF"
                    },
                    title: {
                        text: '<%=Year %>年<%=Month %>月份市怨前十大分类统计图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: [
                        {
                            categories:<%=GetReport2Categories() %>
                        }
                    ],
                    yAxis: [{ // 市怨件数
                        labels: {
                            formatter: function() {
                                return this.value +' 件';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: '市怨件数',
                            style: {
                                color: '#89A54E'
                            }
                        }
    
                    }, { // 市怨百份比
                        gridLineWidth: 0,
                        title: {
                            text: '市怨百分比',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' %';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true    
                    }
                    ],
                    tooltip: {
                        formatter: function() {
                            var unit = {
                                '市怨件数': '件',
                                '百分比': '%'
                            }[this.series.name];
                            return "<b>"+ this.series.name+"</b><br/>" +this.x +': '+ this.y +' '+ unit;
                        }
                    },
                    series: [
                    <%=GetReport2Series() %>
                    ]
                });
            });
    
      
    </script>

    <script>
        //报表3
       
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container_3',
                        zoomType: 'xy',
                        borderWidth: 0,
                        backgroundColor:"#FFFFFF"
                    },
                    title: {
                        text: '<%=Year %>及<%=PreYear %>年厂内品质异常月度对比走势图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: [{
                        categories: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月']
                    }],
                    yAxis: [{ // 市怨件数
                        labels: {
                            formatter: function() {
                                return this.value +' 件';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: '不适合品处理票数',
                            style: {
                                color: '#89A54E'
                            }
                        }
    
                    }, { // 市怨百份比
                        gridLineWidth: 0,
                        title: {
                            text: '百分比',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' %';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true    
                    }
                    ],
                    tooltip: {
                        formatter: function() {
                            <%=GetTooltipUnit3() %>

                            return "<b>"+ this.series.name+"</b><br/>" +this.x +': '+ this.y +' '+ unit;
                        }
                    },
                    series: [
                    <%=GetReport3Series() %>

                    ]
                });
            });
    
      
    </script>

    <script>
        //报表4
       
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container_4',
                        zoomType: 'xy',
                        borderWidth: 0,
                        backgroundColor:"#FFFFFF"
                    },
                    title: {
                        text: '<%=Year %>年<%=Month %>月份厂异前十大供应商分类统计图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: [
                        {
                            categories:<%=GetReport4Categories() %>
                        }
                    ],
                    yAxis: [{ // 市怨件数
                        labels: {
                            formatter: function() {
                                return this.value +' 件';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },
                        title: {
                            text: '不适合品处理票数',
                            style: {
                                color: '#89A54E'
                            }
                        }
    
                    }, { // 市怨百份比
                        gridLineWidth: 0,
                        title: {
                            text: '百分比',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        labels: {
                            formatter: function() {
                                return this.value +' %';
                            },
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true    
                    }
                    ],
                    tooltip: {
                        formatter: function() {
                            var unit = {
                                '厂异件数': '件',
                                '百分比': '%'
                            }[this.series.name];
                            return "<b>"+ this.series.name+"</b><br/>" +this.x +': '+ this.y +' '+ unit;
                        }
                    },
                    series: [
                    <%=GetReport4Series() %>
                    ]
                });
            });
    
      
    </script>
</body>
</html>
